<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rest API</title>
</head>
<body>
    <button onclick="testGet()">GET请求 查</button>
    <button onclick="testPost()">POST请求 增</button>
    <button onclick="testPut()">PUT请求 改</button>
    <button onclick="testDelete()">DELETE请求 删</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.js"></script>
    <script>
        function testGet(params){
            axios.get('http://localhost:9001/posts')
            .then(response=>{
                console.log('/posts Get', response.data);   
            })
        }
        function testPost(params){
            axios.post('http://localhost:9001/posts',
             {"title":"json-server3", "author":"typicode3"})
            .then(response=>{
                console.log('/posts Post', response.data);   
            })
        }
        function testPut(params){
            axios.put('http://localhost:9001/posts/3',
            {"title":"json-server4", "author":"typicode4"})
            .then(response=>{
                console.log('/posts', response.data);   
            })
        }
        function testDelete(params){
            axios.delete('http://localhost:9001/posts/4')
            .then(response=>{
                console.log('/posts', response.data);   
            })
        }
    </script>

</body>
</html>